<template>
  <div class="todo-list">
    <h2>Todo List</h2>
    <input v-model="newTodo" type="text" placeholder="Add a new todo" />
    <button @click="addTodo">Add</button>

    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="removeTodo(todo.id)">delete</button>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

const todos = reactive([
  { id: 1, text: 'Sample Todo 1' },
  { id: 2, text: 'Sample Todo 2' },
  { id: 3, text: 'Sample Todo 3' },
]);
const newTodo = ref('');

let nextId = 4; // Start from the next available ID

function addTodo() {
  if (newTodo.value.trim()) {
    todos.push({ id: ++nextId, text: newTodo.value.trim() });
    newTodo.value = '';
  }
}

function removeTodo(id:any) {
  const index = todos.findIndex(todo => todo.id === id);
  if (index !== -1) {
    todos.splice(index, 1);
  }
}

onMounted(() => {
  nextId = Math.max(...todos.map(todo => todo.id), 4) + 1;
});
</script>

<style scoped>
.todo-list {
  text-align: center;
}

input {
  padding: 5px;
  margin-right: 10px;
}

button {
  padding: 5px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0b7dda;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  cursor: pointer;
  padding: 10px;
  margin: 5px 0;
  background-color: #f1f1f1;
}

li:hover {
  background-color: #ddd;
}
</style>
